<template>
  <div>
    <el-drawer
        :title="title"
        :visible="true"
        :wrapperClosable="false"
        direction="rtl"
        @close="handleClose">
      <div class="mainDrawer" style="">
        <div class="subTitle">账号基本信息</div>
        <div class="formItem">
          <div class="label">登录账号:</div>
          <el-input v-model="param.username" @input="(v)=>(param.username = v.replace(/[^A-Za-z0-9]/g, ''))" class="inputStyle" :maxlength="20" placeholder="请输入登录账号"></el-input>
        </div>
        <div class="formItem">
          <div class="label" style="text-align: right;">姓名:</div>
          <el-input v-model="param.name" class="inputStyle" placeholder="请输入姓名"></el-input>
        </div>
        <div class="formItem">
          <div class="label">联系电话:</div>
          <el-input v-model="param.phone" class="inputStyle" placeholder="请输入联系电话"></el-input>
        </div>
        <div class="formItem" v-if="!accountId" style="margin-top:29px;">
          <div class="label">密码:</div>
          <div class="label" style="color: #999999;">初始密码为登录账号</div>
        </div>
        <div class="subTitle" style="margin-top:45px;">模块权限</div>
        <div class="formItem">
          <div class="label">模块权限:</div>
          <el-select v-model="param.permission" multiple class="inputStyle">
            <el-option v-for="item in authList" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </div>
        <div style="display: flex;align-items: center;flex-direction: row-reverse">
          <div class="smallTextBtn" @click="handleClose">取消</div>
          <div class="smallTextLightBtn" style="margin-right: 8px;" @click="handleConfirm">确定</div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import {createAccount, editAccount} from "@/api/account";

export default {
  props: ['info'],
  data() {
    return {
      accountInfo: this.info,
      accountId: null,
      title: '修改信息',
      authList: [
      {
          value:'Order',
          label:'服务列表'
        },
        {
          value:'NewOrder',
          label:'新建服务'
        },
        {
          value: 'Tag',
          label: '标签库'
        },
        {
          value: 'Channel',
          label: '渠道库'
        },
        {
          value: 'Human',
          label: '人力库'
        },
        {
          value: 'User',
          label: '用户库'
        }
      ],
      param: {
        username: '',
        name: '',
        phone: '',
        permission: []
      }
    }
  },
  mounted() {
    console.log(this.accountInfo)

    if(!this.accountInfo) {
      this.title = '新建'
    }else {
      const {username, name, phone, permission, id} = this.accountInfo
      this.title = '修改信息'
      this.param = {
        username: username,
        name: name,
        phone: phone,
        permission: permission
      }
      this.accountId = id
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    handleConfirm() {
      const keys = Object.keys(this.param)
      const invalidLength = keys.filter(e => this.param[e] === '' || this.param[e] === null).length;
      if(invalidLength || this.param.permission.length === 0) {
        return this.$message.error('请完成所有信息后提交')
      }
      if(this.accountId) {
        // 更新
        editAccount(Object.assign({},this.param,{id: this.accountId})).then(res => {
          if (res) {
            this.$message.success('操作成功')
            this.handleClose();
          }
        })
      }else {
        // 新建
        createAccount(this.param).then(res => {
          if (res) {
            this.$message.success('操作成功')
            this.handleClose();
          }
        })
      }
    },
  }
}
</script>
<style scoped lang="scss">
.subTitle {
  font-weight: 600;
  font-size: 16px;
  color: #333333;
  margin-bottom: 16px;
}

.formItem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.label {
  font-weight: 400;
  font-size: 14px;
  color: #666666;
  white-space: nowrap;
  margin-right: 4px;
  width: 60px;
}

.inputStyle {
  width: 340px;
}

.mainDrawer {
  padding: 0 40px;
  width: 486px;
}

@media (max-width: 768px) {
  ::v-deep .el-drawer {
    width: 100vw !important;

    .mainDrawer {
      padding: 0 20px;
      width: 100%;
    }
  }
  .inputStyle {
    width: 80%;
  }
}

::v-deep .el-drawer__header {
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  padding-left: 40px;
}
</style>
